<template>
  <div class="app-container">
    <el-form :model="selectForm" ref="queryForm" :inline="true">
      <el-form-item label="所属公司">
        <treeselect v-if="company" style="width: 199px;height: 32px" v-model="selectForm.deptId" :options="company"
                    placeholder="请选择所属公司"/>
      </el-form-item>
      <el-form-item label="报废单号">
        <el-input
          v-model="selectForm.oddNumbers"
          placeholder="请输入报废单号"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="申请人">
        <el-input
          v-model="selectForm.sysUser"
          placeholder="请输入申请人"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>
<!--      <el-form-item label="审核状态">-->
<!--        <el-select-->
<!--          v-model="selectForm.verifyStatus"-->
<!--          placeholder="审核状态"-->
<!--          clearable-->
<!--          size="small"-->
<!--          style="width: 240px"-->
<!--        >-->
<!--          <el-option-->
<!--            v-for="dict in statusOptions"-->
<!--            :key="dict.dictValue"-->
<!--            :label="dict.label"-->
<!--            :value="dict.value"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->

      <el-form-item label="申请时间">
        <el-date-picker
          v-model="selectDate"
          @change="dateSelect"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-checkbox v-model="vsType">我审核的</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="selectForm.pageNum=1;getList()">搜索</el-button>
        <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添加</el-button>
        <el-button type="warning" icon="el-icon-download" size="mini" @click="exportList">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list" stripe>
      <el-table-column align="center" type="index" label="序号" width="55"/>
      <el-table-column align="center" label="报废单号" property="oddNumbers" width="150">
        <template slot-scope="scope" style="text-align: center">
          <span style="color: #2196F3;cursor: pointer" @click="details(scope.row)">{{scope.row.oddNumbers}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="涉及设备" property="deviceName" width="150"></el-table-column>
      <el-table-column align="center" label="申请日期" property="applicationTime" width="150">
      </el-table-column>
      <el-table-column align="center" label="购置日期" property="purchaseTime" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column align="center" label="报废日期" property="scrapTime" width="150">
      </el-table-column>
      <el-table-column label="申请人" property="sysUserName" width="100"/>
      <el-table-column label="报废原因" property="scrapInfo" width="150"/>
<!--      <el-table-column label="当前节点" property="nodeId" width="100"/>-->
<!--      <el-table-column align="center" label="审核状态" property="verifyStatus" width="100">-->
<!--        <template slot-scope="scope" style="text-align: center">-->
<!--          <div class="status green" style="" v-show="scope.row.verifyStatus=='1'">进行中</div>-->
<!--          <div class="status purple" v-show="scope.row.verifyStatus=='2'">已结束</div>-->
<!--          <div class="status red" v-show="scope.row.verifyStatus=='3'">未提交</div>-->
<!--          &lt;!&ndash; <div class="status red" v-show="scope.row.verifyStatus=='4'">已打回</div> &ndash;&gt;-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column align="center" label="审核结束时间" property="endTime" width="150"/>-->
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-refresh-right"
            v-show="scope.row.verifyStatus=='2'"
            @click="handleDelete(scope.$index, scope.row)">撤销
          </el-button>
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-edit"
            v-show="scope.row.verifyStatus=='3'"
            @click="handleEdit(scope.row)">编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      :total="total"
      :page.sync="selectForm.pageNum"
      :limit.sync="selectForm.pageSize"
      @pagination="getList"
    />

  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import {treeselect} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {scrapList,deviceExport} from '@/api/scrap/index'

export default {
  components: {
    Treeselect,
  },
  name: "equipmentScrapping.vue",
  data() {
    return {
      selectForm: {
        pageNum: 1,
        pageSize: 10,
        deptId: undefined,
        oddNumbers: null,//报废单号
        sysUser: null,
        verifyStatus: null,
        vsType: 1,
      },
      vsType: false,
      company: '',
      selectDate: '',
      statusOptions: [
        {value: '1', label: '进行中'},
        {value: '2', label: '已结束'},
        {value: '3', label: '未提交'}],
      loading: false,
      total:0,
      list: [],
      headers: { Authorization: 'Bearer ' + getToken() }
    }
  },
  created() {
    this.getTree()
    this.getList()
  },
  methods: {
    //所属部门下拉
    getTree() {
      treeselect().then(response => {
        this.company = response.data;
      });
    },
    async getList(){
      //设备报废列表
      this.selectForm.vsType = this.vsType ? 2 : 1
      this.loading = true
      let res = await scrapList(this.selectForm)
      this.list = res.rows
      this.total = res.total
      this.loading = false
    },
    dateSelect() {
      // debugger
      this.selectForm.applicationTimeStart = this.selectDate&&this.selectDate[0]||null
      this.selectForm.applicationTimeEnd = this.selectDate&&this.selectDate[1]||null
    },
    add(){
      this.$router.push({path:'/equipmentCZ/equipmentScrappingEdit'});
    },
    details(row){
      this.$router.push({path:'/equipmentCZ/equipmentScrappingDetail',query:{id:row.id}});
    },
    //删除
    handleDelete(index,row){
      this.$confirm('确定撤销该数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '撤销成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消撤销'
        });
      });
    },
    handleEdit(row){
      //编辑
      this.$router.push({path:'/equipmentCZ/equipmentScrappingEdit',query:{id:row.id}});
    },
    exportList(){
      //导出
      this.$confirm('是否确认导出?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        let res = await deviceExport()
        return this.download(res.data)
      }).catch(function() {
      })
    }
  }
}
</script>

<style scoped>
.status{
  color: white;
  width: 54px;
  height: 22px;
  display: inline-block
}
.green{
  background: #78BF34;
}
.purple{
  background:#9E71DC
}
.red{
  background: red;
}
</style>
